<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>天猫首页</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
	<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
	<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
	<style>
		body {
			padding-top: 200px;
		}
		div.categoryWithCarousel {
			width: 100%;
			position: relative;
		}
		div.headbar {
			background-color: #DD2727;
		}
		div.categoryWithCarousel div.head {
			width: 200px;
			height: 36px;
			background-color: #C60A0A;
			line-height: 36px;
			font-size: 16px;
			font-weight: bold;
			color: white;
			margin-left: 20px;
			display: inline-block;
		}
		div.categoryWithCarousel div.rightMenu {
			display: inline-block;
		}
		div.rightMenu a {
			color: white;
			font-size: 16px;
			text-decoration: none;
		}
		div.rightMenu span {
			margin: 0 20px;
		}
		div.rightMenu img {
			height: 30px;
		}
		div.carousel-of-product {
			height: 510px;
			width: 1024px;
			margin: 0 auto;
		}
		img.carouselImage {
			height: 510px !important;
		}
		div.carouselBackgroundDiv {
			width: 100%;
			height: 510px;
			background-color: #E8E8E8;
			position: absolute;
			top: 36px;
			z-index: -1;
		}
		img.catear {
			position: absolute;
			height: 15px;
			display: none;
		}
	</style>
	<script>
		$(function () {
		    $("div.rightMenu span").mouseenter(function () {
		        var left = $(this).position().left;
                var top = $(this).position().top;
                var width = $(this).css("width");
                var destLeft = parseInt(left) + parseInt(width) / 2;
                $("img#catear").css("left", destLeft);
                $("#img#catear").css("top", top-20);
                $("img#catear").fadeIn(500);
            });
            $("div.rightMenu span").mouseleave(function(){
                $("img#catear").hide();
            });
		});
	</script>
</head>
<body>
	<img class="catear" id="catear" src="https://how2j.cn/tmall/img/site/catear.png" style="left: 260.5px; top: 159.65px; display: none;">
	<div class="categoryWithCarousel">
		<div class="headbar">
			<div class="head ">
				<span class="glyphicon glyphicon-th-list" style="margin-left:10px"></span>
				<span style="margin-left:10px">商品分类</span>
			</div>
			<div class="rightMenu">
				<span><a href="#nowhere"><img src="https://how2j.cn/tmall/img/site/chaoshi.png"></a></span>
				<span><a href="#nowhere"><img src="https://how2j.cn/tmall/img/site/guoji.png"></a></span>
				<span>
                <a href="#nowhere">
                    平板电视
                </a></span>
				<span>
                <a href="#nowhere">
                    电热水器
                </a></span>
			</div>
		</div>
		<div data-ride="carousel" class="carousel-of-product carousel slide" id="carousel-of-product">
			<!-- Indicators -->
			<ol class="carousel-indicators">
				<li class="active" data-slide-to="0" data-target="#carousel-of-product"></li>
				<li data-slide-to="1" data-target="#carousel-of-product" class=""></li>
				<li data-slide-to="2" data-target="#carousel-of-product" class=""></li>
				<li data-slide-to="3" data-target="#carousel-of-product" class=""></li>
			</ol>
			<!-- Wrapper for slides -->
			<div role="listbox" class="carousel-inner">
				<div class="item active">
					<img src="https://how2j.cn/tmall/img/lunbo/1.jpg" class="carousel carouselImage">
				</div>
				<div class="item">
					<img src="https://how2j.cn/tmall/img/lunbo/2.jpg" class="carouselImage">
				</div>
				<div class="item">
					<img src="https://how2j.cn/tmall/img/lunbo/3.jpg" class="carouselImage">
				</div>
				<div class="item">
					<img src="https://how2j.cn/tmall/img/lunbo/4.jpg" class="carouselImage">
				</div>
			</div>
		</div>
		<div class="carouselBackgroundDiv">
		</div>
	</div>
</body>
</html>